<template>
    <view class="mycalendar">
        <view class="mycalendar_content">
            <view class="mycalendar_contentHead">
                <view class="item" v-for="item in weekList" :key="item">
                    {{ item }}
                </view>
            </view>
            <view class="mycalendar_contentThBody">
                <view
                    class="item"
                    :class="{
                        'is-active': !!date,
                        'is-nowdate': nowdate === date,
                    }"
                    v-for="(date, i) in monthList"
                    :key="i"
                    @tap="onClickItem(date)"
                    >{{ date }}</view
                >
            </view>
        </view>
    </view>
</template>
<script>
/* 
* 通用日历模块，自适应父容器（最好正方形）
* 
*/
import Taro from "@tarojs/taro";
export default {
    props: {
        firstdate: {
            type: Number,//0 - 6 星期天到星期6
            default: 0,
        },
        month: {
            type: Number,
            default: 2,
        },
        nowdate: {
            type: Number,
            default: 1,
        }
    },
    data() {
        return {
            weekList: ["sun", "mon", "tue", "wed", "thu", "fri", "sat"],
            // 条件 知道该月份第一天星期几，一共多少天
            monthList: [],
            // 当天
            // nowdate: 8,
        };
    },

    onLoad() {
        // 格子max42
        // 第一天周几firstdate 1 => 3 ,日子总数=> totoldate:31
        // let firstdate = 1;
        let date31 = [1, 3, 5, 7, 8, 10, 12];
        let date30 = [4, 6, 9, 11];
        let totoldate = 31;

        if (this.month == 2) {
            totoldate = 28;
        }
        date31.map(item => {
            if (this.month == item) {
                totoldate = 31;
            }
        })
        date30.map(item => {
            if (this.month == item) {
                totoldate = 30;
            }
        })

        let dateNum = 1;
        for (let i = 0; i < 42; i++) {
            if (i < this.firstdate || dateNum > totoldate) {
                this.monthList.push("");
            } else {
                this.monthList.push(dateNum);
                dateNum += 1;
            }
        }

    },

    watch: {
        firstdate() {
            // console.log(this.firstdate)
        },
        month() {
            let tmy = [];
            // console.log(this.firstdate)
            let date31 = [1, 3, 5, 7, 8, 10, 12];
            let date30 = [4, 6, 9, 11];
            let totoldate = 0;

            if (this.month == 2) {
                totoldate = 28;
            }
            date31.map(item => {
                if (this.month == item) {
                    totoldate = 31;
                }
            })
            date30.map(item => {
                if (this.month == item) {
                    totoldate = 30;
                }
            })

            console.log('totoldate=>', totoldate)


            let dateNum = 1;
            for (let i = 0; i < 42; i++) {
                if (i < this.firstdate || dateNum > totoldate) {
                    tmy.push("");
                } else {
                    tmy.push(dateNum);
                    dateNum += 1;
                }
            }

            this.monthList = tmy;
        }
    },
    methods: {
        onClickItem(date) {
            if(!date) return;
            this.$emit('clickItem',date)
        }
    }
};
</script>
<style lang="less">
@tablesize: 50px;
.mycalendar {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
}
.mycalendar_content {
    height: 500px;
    border-radius: 15px;
}

.mycalendar_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.mycalendar_contentHead {
    width: 100%;
    flex: 1;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        // background-color: #ccc;
        color: #59b8a3;
    }
}
.mycalendar_contentThBody {
    flex: 6;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    // overflow: hidden;

    .item {
        display: inline-block;
        width: calc(100% / 7);
        height: calc(100% / 6);
        // height: 40px;
        background-color: #e8e8e8;
        display: flex;
        justify-content: center;
        align-items: center;

        &.is-active {
            background-color: #ffffff;

            &:hover {
                background-color: rgb(158, 197, 248);
            }
        }
        &.is-nowdate {
            background-color: #a421e0;
        }
    }
}
</style>